<template>
  <div>
    <div class="herdertop">
      <img src="../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>商圈管理</el-breadcrumb-item>
        <el-breadcrumb-item>城市服务管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="center">
      <div class="header">
        <div class="left">
          <div class="demo-input-suffix cityinput">
            城市
            <el-select
              clearable
              @change="buss"
              v-model="value"
              placeholder="请选择"
            >
              <el-option
                v-for="item in obtainList"
                :key="item.cityCode"
                :label="item.cityName"
                :value="item.cityCode"
              >
              </el-option>
            </el-select>
          </div>
          <div class="demo-input-suffix">
            商圈
            <el-select
              clearable
              @change="chechkBus"
              v-model="value1"
              placeholder="请选择"
            >
              <el-option
                v-for="item in business"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="right">
          <div class="demo-input-suffix cityinput">
            新增城市
            <el-select
              v-model="value3"
              value-key="subRgCode"
              @change="changeValue"
              placeholder="请选择"
            >
              <el-option
                v-for="item in cityList"
                :key="item.subRgCode"
                :label="item.subRgName"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <el-button
            style="background-color:#fd804c;color: #fff;"
            @click="addCity(value3)"
            >添加城市</el-button
          >
        </div>
      </div>
      <div class="drop-down">
        <div class="shopList" v-for="(item, index) in datalist" :key="index">
          <div class="shopHeader">
            <div class="left" @click="togg" :data-cityCode="item.cityCode">
              <div>{{ item.cityName }}</div>
              <div class="el-icon-arrow-down"></div>
            </div>
            <div
              class="right"
              :data-code="item.cityCode"
              :data-isOpenService="
                item.isOpenServiceDo ? item.isOpenServiceDo : 'false'
              "
              @click="openClose"
            >
              <el-switch
                v-model="item.isOpenServiceDo"
                active-text="开启"
                inactive-text="关闭"
                active-color="#fb8053"
                inactive-color="#dcdfe6"
              >
              </el-switch>
            </div>
          </div>
          <div class="shopContent" :data-show="item.show" v-show="item.show">
            <div
              class="shopli"
              v-for="(itemName, index) in item.businessCityInfo"
              :key="index"
            >
              <div class="left">
                <div>{{ itemName.businessAreaName }}</div>
              </div>
              <div
                class="right"
                :data-bussCode="itemName.businessAreaCode"
                :data-code="item.cityCode"
                :data-isOpenService="
                  itemName.isOpenService ? itemName.isOpenService : 'false'
                "
                @click="openClose"
              >
                <el-switch
                  v-model="itemName.isOpenService"
                  active-text="开启"
                  inactive-text="关闭"
                  active-color="#fb8053"
                  inactive-color="#dcdfe6"
                >
                </el-switch>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="shopList" v-for="(item, index) in obtainListTwo" :key="index">
        <div class="shopHeader">
          <div class="left" :data-cityCode="item.cityCode">
            <div>{{ item.cityName }}</div>
          </div>
          <div
            class="right"
            :data-code="item.cityCode"
            :data-isOpenService="item.isOpenServiceDo"
            @click="openCloseTwo"
          >
            <el-switch
              v-model="item.isOpenServiceDo"
              active-text="开启"
              inactive-text="关闭"
            >
            </el-switch>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value2: false,
      datalist: [],
      business: [],
      businessCityInfo: [],
      value: [],
      value1: [],
      value3: "",
      cityList: [],
      addCityList: [],
      obtainList: [],
      cityListTwo: [],
      busin: "",
      circle: "",

      obtainListTwo: []
    };
  },

  activated() {
    this.businessList();
    this.obtain();
    this.CityList();
    // setTimeout(this.obtain(), "1000");
  },
  // mounted() {
  // },
  methods: {
    //   列表展示隐藏
    togg(e) {
      //console.log(e.currentTarget.dataset.citycode);

      for (var i = 0; i < this.datalist.length; i++) {
        if (this.datalist[i].cityCode == e.currentTarget.dataset.citycode) {
          this.datalist[i].show = !this.datalist[i].show;
          //console.log(this.datalist[i].show);
        }
      }

      this.$forceUpdate();
    },
    businessList() {
      //
      this.$http({
        url:
          "hsssystemadmin/v1/businessManagement/getBusinessCityInfo?cityCode=" +
          this.busin +
          "&businessAreaName=" +
          this.circle,
        method: "get"
      }).then(res => {
        this.datalist = res.data;
        //console.log(this.datalist)
      });
    },
    CityList() {
      this.$http({
        url: "/pmcadmin/mgr/regions/getMallCities",
        method: "get"
      }).then(res => {
        this.cityList = res.data;
      });
    },
    addCity(obj) {
      console.log(`object`, !!obj);
      if (!!obj) {
        this.$http({
          url: "hsssystemadmin/v1/businessManagement/insertServiceCity",
          method: "POST",
          data: {
            cityDetail: [
              {
                cityCode: obj.subRgCode || "",
                cityName: obj.subRgName || "",
                cityNameInitial: obj.subRgNameInitial || ""
              }
            ]
          }
        })
          .then(res => {
            if (res.success == 1) {
              this.$message.success("添加成功");
              this.addCityList = [];

              this.businessList();
            } else {
              this.$message.error(res.errorMsg);
            }
          })
          .catch(err => {
            this.$message.error(err.errorMsg);
          });
      } else {
        this.$message.error("请先选择城市");
      }
    },
    obtain() {
      this.$http({
        url: "/hsssystemadmin/v1/businessManagement/getCityList",
        method: "get"
      }).then(res => {
        this.obtainList = res.data;
        var obtainListTwo = JSON.parse(localStorage.getItem("obtainListTwo"));

        this.obtainListTwo = this.obtainList.filter(item => {
          let idList = this.datalist.map(v => v.cityCode);

          // return !idList.includes(item.cityCode);
        });
        if (obtainListTwo) {
          for (var i = 0; i < this.obtainListTwo.length; i++) {
            for (var j = 0; j < obtainListTwo.length; j++) {
              if (this.obtainListTwo[i].cityCode == obtainListTwo[j].cityCode) {
                this.obtainListTwo[i].isOpenServiceDo =
                  obtainListTwo[j].isOpenServiceDo;
              }
            }
          }
        }

        this.cityList = this.cityList.filter(item => {
          let idList = this.obtainList.map(v => v.cityCode);
          return !idList.includes(item.subRgCode);
        });
        // //console.log(this.datalist, this.obtainList, this.obtainListTwo);
      });
    },
    changeValue(e) {
      for (var i = 0; i < e.length; i++) {
        var obj = {};
        obj.cityCode = e[i].subRgCode;
        obj.cityName = e[i].subRgName;
      }
      this.addCityList.push(obj);
      //console.log(this.addCityList);
    },
    // 开关
    openClose(e) {
      if (e.currentTarget.dataset.isopenservice == "true") {
        var isOpenService = true;
      } else {
        var isOpenService = false;
      }

      this.$http({
        url: "hsssystemadmin/v1/businessManagement/updateCityService",
        method: "POST",
        data: {
          businessAreaCode: e.currentTarget.dataset.busscode
            ? e.currentTarget.dataset.busscode
            : "",
          cityCode: e.currentTarget.dataset.code
            ? e.currentTarget.dataset.code
            : "",
          isOpenService: isOpenService
        }
      }).then(res => {
        this.$message.success("成功");
        this.businessList();
      });
    },
    openCloseTwo(e) {
      if (e.currentTarget.dataset.isopenservice == true) {
        var isOpenService = true;
      } else {
        var isOpenService = false;
      }

      this.$forceUpdate();
      this.$http({
        url: "hsssystemadmin/v1/businessManagement/updateCityService",
        method: "POST",
        data: {
          businessAreaCode: e.currentTarget.dataset.busscode
            ? e.currentTarget.dataset.busscode
            : "",
          cityCode: e.currentTarget.dataset.code
            ? e.currentTarget.dataset.code
            : "",
          isOpenService: isOpenService
        }
      }).then(res => {
        this.$message.success("成功");

        localStorage.setItem(
          "obtainListTwo",
          JSON.stringify(this.obtainListTwo)
        );
      });
    },
    btii() {
      this.$http({
        url:
          "hsssystemadmin/v1/businessManagement/getBusinessNameList?cityCode=" +
          this.busin,
        method: "GET"
      }).then(res => {
        this.business = res.data;
        //console.log(this.business);
      });
    },
    buss(e) {
      this.busin = e;
      this.btii();
      this.businessList();
    },
    chechkBus(e) {
      this.circle = e;
      this.businessList();
    }
  }
};
</script>
<style scoped>
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  /* margin-bottom: 10px; */
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
.center {
  padding-top: 0px;
}
.header {
  height: 67px;
  display: flex;
  align-items: center;
}
.cityinput {
  margin-right: 30px;
}
.shopList {
  width: 100%;
}
.drop-down {
  margin-top: 20px;
}
.shopList {
  width: 100%;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: #efefef;
  margin-bottom: 20px;
}
.shopHeader {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 30px;
}
.left {
  flex: 1;
  height: 60px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.shopli {
  display: flex;
  align-items: center;
  padding-left: 50px;
  padding-right: 30px;
  font-size: 14px;
}
.right {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
